<!-- 人员列表 -->
<template>
  <div class="strategy">
    <div class="search">
      <el-row
        :gutter="20"
        style=" display: flex; align-items: center;width: 100%;"
      >
        <el-col :span="2"><div class="grid-content bg-purple"><span>人员搜索：</span></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"> <el-input v-model="input" placeholder="请输入内容" /></div></el-col>
        <el-col :span="18"><div class="grid-content bg-purple"> <el-button type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button></div></el-col>
      </el-row>
    </div>
    <div
      style="padding: 20px 15px 19px 17px;
    background-color: #fff;"
    >
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-button type="primary" icon="el-icon-circle-plus-outline" style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important;border:none">新建</el-button>
      <!--  -->
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="userName"
          label="人员名称"
          width="180"
        />
        <el-table-column
          prop="regionName"
          label="归属区域"
        />
        <el-table-column
          prop="role"
          label="角色"
        ><template slot-scope="scope">
          <span>{{ scope.row.role.roleName }}</span>

        </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" style="color: #F56C6C;" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="630px"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">

        <el-form-item label="人员名称" prop="userName">
          <el-input v-model="ruleForm.userName" maxlength="5" />
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="ruleForm.roleId" placeholder="请选择角色">
            <el-option v-for="(item,index) in roleArr" :key="index" :label="item.roleName" :value="item.roleId" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="ruleForm.mobile" maxlength="11" />
        </el-form-item>
        <el-form-item label="负责区域" prop="regionId">
          <el-select v-model="ruleForm.regionId" placeholder="请选择负责区域">
            <el-option v-for="(item,index) in regionArr" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="头像" required>
          <el-upload
            class="image-uploader common-upload"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.image" :src="ruleForm.image" class="image">
            <div slot="tip" class="el-upload__tip">支持扩展名：jpg、png，文件不得大于100kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-checkbox-group v-model="ruleForm.status">
            <el-checkbox label="是否启用" name="status" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
        style="display: flex; align-items: center;justify-content: center;"
      >
        <el-button type="primary" class="el-button--secondary" @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" style="margin-left: 34px!important;" class="el-button--primary1" @click="submitForm('ruleForm')">确 认</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { GetUserSearchtAPI, GetRoleAPI, GetregionListAPI, updateUserAPI } from '@/api/personnelList'
export default {
  name: 'PersonnelList',
  components: {},
  props: {
  },
  data() {
    return {
      input: '',
      tableData: [],
      dialogVisible: false,
      roleArr: [],
      regionArr: [],
      title: '',
      ruleForm: {
        // {
        //     "id": 4,
        //     "roleId": 2,
        //     "roleCode": "1002",
        //     "userName": "运营魏帅鸣",
        //     "loginName": null,
        //     "password": "",
        //     "secret": "",
        //     "mobile": "13651077781",
        //     "regionId": "1348506559038099457",
        //     "regionName": "金燕龙办公楼",
        //     "image": "http://lkd2-java.itheima.net/image/avatar.png",
        //     "status": true,
        //     "role": {
        //         "roleId": 2,
        //         "roleCode": "1002",
        //         "roleName": "运营员"
        //     }
        // }

        userName: '',
        roleId: '',
        roleCode: '',
        loginName: '',
        password: '',
        secret: '',
        mobile: '',
        regionId: '',
        regionName: '',
        status: false,
        role: null
      },

      rules: {
        userName: [
          { required: true, message: '请输入人员名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 1, max: 11, message: '长度在 1 到 11 个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请选择负责区域', trigger: 'change' }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    GetregionListAPI({
      pageSize: 100,
      pageIndex: 1
    }).then(res1 => {
      console.log(res1, 'GetregionListAPI')
      if (res1.status === 200) {
        this.regionArr = res1.data.currentPageRecords
      }
    })
    this.GetUserSearchtAPIFn({
      pageIndex: 1,
      pageSize: 10

    })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    handleAvatarSuccess(res, file) {
      this.ruleForm.image = URL.createObjectURL(file.raw)
      console.log(res, file, URL.createObjectURL(file.raw), this.ruleForm.image, 'handleAvatarSuccess')
    },
    beforeAvatarUpload(file) {
      console.log(file, 'file')
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt100k = file.size / 1024 / 1024 / 1024 < 100
      if (!isJPG) {
        if (!isPNG) {
          this.$message.error('上传头像图片只能是 JPG 格式 或者 PNG 格式!')
        }
      }
      console.log(isJPG, 'isJPG', isPNG)
      if (!isLt100k) {
        this.$message.error('上传头像图片大小不能超过 100kb!')
      }

      return (isJPG || isPNG) && isLt100k
    },
    async GetUserSearchtAPIFn(params) {
      const { data } = await GetUserSearchtAPI(params)
      this.tableData = data.currentPageRecords
      // console.log(data.currentPageRecords)
    },
    searchFn() {
      this.GetUserSearchtAPIFn({
        pageIndex: 1,
        pageSize: 10,
        userName: this.input
      })
    },
    handleMessage(index, row) {
      console.log(index, row)
    },
    handleEdit(index, row) {
      console.log(index, row, 'handleEdit')
      this.title = '编辑人员'
      GetRoleAPI({
        id: row.id
      }).then(res => {
        console.log(res, 'GetRoleAPI')
        if (res.status === '200') {
          this.roleArr = res.data
          this.dialogVisible = true
          this.ruleForm = {
            ...row
          }
        }
      })
    },
    handleDelete(index, row) {
      console.log(index, row, 'handleDelete')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm, 'ruleForm')
          var regionName = this.regionArr.filter(item => {
            return item.id === this.ruleForm.regionId
          })[0].name
          var params = {
            image: this.ruleForm.image,
            mobile: this.ruleForm.mobile,
            regionId: this.ruleForm.regionId,
            regionName: regionName,
            roleId: this.ruleForm.roleId,
            status: this.ruleForm.status,
            userName: this.ruleForm.userName

          }
          updateUserAPI(this.ruleForm.id, params).then(res => {
            console.log(res, 'updateUserAPI')
            this.dialogVisible = false
            this.GetUserSearchtAPIFn()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogVisible = false
      this.$refs[formName].resetFields()
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.search{
    display: flex;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
}
.image{
  width: 76px;
    height: 76px;
    margin: 4px;
    display: block;
    object-fit: contain;
}
.common-upload {
  ::v-deep .el-upload {
    position: relative;
    overflow: hidden;
    background: #f3f6fb;
    border: 1px dashed #d8dde3;
    border-radius: 4px;
    cursor: pointer;
}
}
::v-deep .el-select  {
    width: 100%;
}
::v-deep .el-dialog__footer{
  text-align: center;
      display: flex;
    align-items: center;
    justify-content: center;
}
.el-button--secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
.el-button--primary1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
}
</style>
